import { useState } from "react";
import Button from "@/components/Button";
import List, { ListItem } from "@/components/List";
import Panel from "@/components/Panel";

const data = [
  { id: "Mondstadt", name: "蒙德" },
  { id: "Liyue", name: "璃月" },
  { id: "Inazuma", name: "稻妻" },
  { id: "Sumeru", name: "须弥" },
  { id: "Fontaine", name: "枫丹" },
  { id: "Natlan", name: "纳塔" },
  { id: "Snezhnaya", name: "至冬" },
];

function reverseString(str: string) {
  return str.split("").reverse().join("");
}

function ListDemo() {
  const [rows, setRows] = useState(data);
  const [header, setHeader] = useState("区域");
  const [footer, setFooter] = useState("区域列表");

  const handleSort = () => {
    setRows((prev) => [...prev].reverse());
    setHeader((prev) => reverseString(prev));
    setFooter((prev) => reverseString(prev));
  };

  return (
    <div className="flex gap-4 items-start mb-4">
      <List
        header={<div>{header}</div>}
        footer={<div>{footer}</div>}
        dataSource={rows}
        bordered
        rowKey={(it) => it.id}
        renderItem={(it) => <ListItem>{it.name}</ListItem>}
        className="flex-1"
      />
      <div className="flex-1">
        <Button onClick={handleSort}>排序</Button>
      </div>
    </div>
  );
}

export default function Lists() {
  return (
    <Panel title="Lists" className="bg-white">
      <div className="flex gap-4 items-start mb-4">
        <List
          header={<div>区域</div>}
          footer={<div>区域列表</div>}
          dataSource={data}
          bordered
          rowKey={(it) => it.id}
          renderItem={(it) => <ListItem>{it.name}</ListItem>}
        />
        <List
          header={<div>区域</div>}
          dataSource={data}
          rowKey={(it) => it.id}
          renderItem={(it) => <ListItem>{it.name}</ListItem>}
        />
        <List
          footer={<div>区域列表</div>}
          dataSource={data}
          bordered
          rowKey={(it) => it.id}
          renderItem={(it) => <ListItem>{it.name}</ListItem>}
        />
        <List
          dataSource={data}
          rowKey={(it) => it.id}
          renderItem={(it) => <ListItem>{it.name}</ListItem>}
        />
      </div>
      <ListDemo />
    </Panel>
  );
}
